<template>
	<div class="middle">
		<h4>热门城市</h4>
		<ul class="nav">
			<router-link v-for="items in hot" :key="items.code" :to="{path:'/indexcity', query:{name:items.name, id:items.id}}">
				<li>{{items.name}}</li>
			</router-link>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "hot",
		data: function() {
			return {
				hot: [],
			}
		},
		created() {
			let obj = this;
			this.$axios({
				url: "https://elm.cangdu.org/v1/cities?type=hot",
				method: "get",
			}).then(function(res) {
				for (let i = 0; i < res.data.length; i++) {
					obj.hot.push(res.data[i]);
				}
			})
		}
	}
</script>

<style scoped>
	.middle {
		height: 118px;
		background: #FFFFFF;
		margin-top: 10px;
	}

	.middle h4 {
		color: #666666;
		font-size: 12px;
		font-weight: 400;
		padding-left: 10px;
		height: 36px;
		line-height: 36px;
		border-bottom: 1px solid #e4e4e4;
	}

	.nav {
		width: 100%;
		height: 82px;
		list-style: none;
		box-sizing: border-box;
	}

	.nav li {
		width: 25%;
		height: 50%;
		box-sizing: border-box;
		float: left;
		font-size: 12px;
		color: #3190E8;
		text-align: center;
		line-height: 41px;
		border-bottom: .025rem solid #e4e4e4;
		border-right: .025rem solid #e4e4e4;
	}
</style>
